<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据双向绑定及计算属性</title>
    <script src="Observe.js"></script>
    <script src="Watcher.js"></script>
    <script src="Compile.js"></script>
    <script src="SelfVue.js"></script>
    <script src="Computed.js"></script>
</head>
<body>
    <div id="demo">
        双向绑定： <h1>{{name}}</h1>
        双向绑定： <input type="text" v-model="name">
        <hr>
        计算属性(v-model)： <h1 id="cmp">{{say}}</h1>
        <hr>
        指令(v-on:click)： <input type="button" v-on:click="changeColor" value="改变计算属性的颜色">
    </div>
    
    <script>
        var sv = new SelfVue({
            el: '#demo',
            data: {
                name: 'SprWu',
                say: ''
            },
            methods: {
                changeColor() {
                    document.querySelector('#cmp').style.color = 'deepskyblue';
                }
            }
        });
        var obj = {
            say: ''
        }
        Computed(obj, 'say', function() {
            return `Hello ${sv.name} !`;
        })
        window.setTimeout(()=> {
            sv.name = 'SPRWU'
        },2000);
    </script>
</body>
</html>